<template>
  <div>
    <h2>Left组件</h2>

    <ArticleList :title="title" :content="content"></ArticleList>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "卜算子.咏梅",
      content: `
      风雨送春归，飞雪迎春到。
      已是悬崖百丈冰，犹有花枝俏。
      俏也不争春，只把春来报。
      待到山花烂漫时，她在丛中笑。
      `,
    };
  },
  // 组件的命名是有规范的，是有要求
  // 组件文件，命名要求：
  // 1. 大驼峰的写法，要求至少有两个词，比如 MyLeft.vue  MyAbcBcd.vue
  // 2. 至少两次词，全小写，并且用中横线连接。比如 my-left.vue  01-指令.vue

  // 如果组件文件命名不符合要求，也有解决办法，办法是在当前文件的JS中，定义name也行。
  // name的值，要求和上面一样
  // name: 'MyLeft' // 写法一
  name: "my-left", // 写法二
};
</script>

<style scoped>
h2 {
  color: skyblue;
}
</style>